<template>
	<view class="container">
		
		<view class="item bg-fff" v-for="(item,index) in addressList" :key="index" @click="handleSelect(item)" :class="item.delivery==0?'nodelivery':''">
			<view class="item-phone">{{item.name}} {{item.phone}}</view>
			<view class="item-address">{{item.region.province}}{{item.region.city}}{{item.region.region}}{{item.detail}}{{item.house_number}}</view>
			<view class="item-operate flex-space-between">
				<view class="" v-if="isSelect == 0">
					<u-checkbox shape="circle" :active-color="$setting.colorTheme()" :value="default_id == item.address_id" @change.stop="checkboxChange(item)">
						<text class="item-address-txt-def">设为默认</text>
					</u-checkbox>
				</view>
				<view class="" v-if="isSelect == 1">
					选择地址
				</view>
				
				<view class="flex-align-center">
					<view class="flex-align-center" style="margin-right: 30rpx;" @click.stop="jump('/pages/mine/address/add?address_id='+item.address_id)">
						<image class="delete" :src="$setting.imageUrl()+'edit.png'"></image>
						<view>编辑</view>
					</view>
					<view class="flex-align-center" @click.stop="handleDelete(item)">
						<image class="delete" :src="$setting.imageUrl()+'delete.png'"></image>
						<view>删除</view>
					</view>
				</view>
				
			</view>
		</view>
		
		<view style="" class="btnAddView">
			<b-u-button-theme style="position: fixed;bottom: 50px;" width="630rpx" height="90rpx" size="30rpx" @click="jump('/pages/mine/address/add')">添加新地址</b-u-button-theme>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				default_id: '0',
				addressList: [],
				isSelect: 0,
			}
		},
		onLoad(options) {
			this.isSelect = options.isSelect;
		},
		onShow() {
			this.getHttp();
		},
		methods: {
			handleDelete(item) {
				uni.showModal({
					title: '提示',
					content: '您确定要移除当前地址吗？',
					success: (res) => {
						if (res.confirm) {
							// console.log('用户点击确定');
							uni.$u.api.deleteAddress({address_id: item.address_id}).then(res => {
								this.getAddress();
							})
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			},
			checkboxChange(item) {
				uni.$u.api.postSetDefault({address_id: item.address_id}).then(res => {
					this.getAddress();
				})
			},
			handleSelect(item) {
				if(this.isSelect == 1) {
					getApp().globalData.addressInfo = item;
					uni.navigateBack();
				}
			},
			jump(url) {
				uni.navigateTo({
					url: url
				})
			},
			getAddress() {
				uni.$u.api.getAddress().then(res => {
					this.default_id = res.default_id;
					this.addressList = res.list;
				})
			},
			getHttp() {
				this.getAddress();
			},
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 30rpx;
		padding-bottom: 200rpx;
		.btnAddView{
			width: 100%;display: flex;justify-content: center;
		}
		.item {
			border-radius: 16rpx;
			padding: 30rpx;
			margin-bottom: 20rpx;
			
			&.nodelivery{
				position: relative;
				background-color: #fefefe;
				
				&::after{
					position: absolute;
					right: 0;
					top: 0;
					line-height: 30rpx;
					content: "超出配送范围";
					font-size: 22rpx;
					padding:10rpx 30rpx;
					background-color: #ffffff;
					color: #6d6d6d;
					border-radius: 0 16rpx 0 16rpx;
					border: 1rpx solid #fff0dc;
				}
				.item-phone{
					color: #b3b3b3;
				}
				.item-address{
					color: #bbbbbb;
				}
				.item-operate{
					color: #bbbbbb;
				}
				.item-address-txt-def{
					color: #bbbbbb;
				}
			}
			
			.item-phone {
				font-size: 30rpx;
				color: #333333;
			}
			
			.item-address {
				margin-top: 10rpx;
				font-size: 26rpx;
				color: #666262;
			}
			
			.item-address-txt-def{
				font-size: 24rpx;
			}
			
			.item-operate{
				margin-top: 28rpx;
				font-size: 24rpx;
				color: #666666;
				
				.delete {
					width: 40rpx;
					height: 40rpx;
				}
				
				/deep/ .u-checkbox .u-checkbox__icon-wrap--checked {
					background-color: $uni-color-theme;
					border-color: $uni-color-theme;
				}
			}
		}
	}
</style>
